/*
 * @Description: 第二十五章（TSX & vite插件） TSX
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-18 18:29:58
 */
// 使用setup函数模式返回
// v-show支持
// ref 在 tempalte内会自动解包，tsx内不会，需要自己解包，就是.value
// v-if 不支持，要用三元表达式去代替
// v-for 不支持， 用map代替
// v-bind 用{}代替
// props emit
// 插槽 slot

const A = (props: any, { slots }) => (
  <>
    <div>{slots.default ? slots.default() : '默认值'}</div>
    <div>{slots.foo?.()}</div>
  </>
)

interface Props {
  name?: string
}

import { defineComponent, ref } from 'vue'
export default defineComponent({
  props: {
    name: String,
  },
  emits: ['on-click'],
  setup(props: Props, { emit }) {
    let h3 = '第二十五章（TSX & vite插件） TSX'
    let p = 'tsx1-3 使用setup函数模式返回'
    const flag1 = false
    const flag2 = ref(false)
    const data = [
      {
        name: 'data1',
      },
      {
        name: 'data2',
      },
      {
        name: 'data3',
      },
      {
        name: 'data4',
      },
    ]

    const tsxClick = (item: any) => {
      console.log('触发了:', item)
      emit('on-click', item)
    }

    const slots = {
      default: () => <div>我是 default slots</div>,
      foo: () => <div>我是foo slots</div>,
    }

    const v = ref<string>('')

    return () => (
      <div>
        <h3>{h3}</h3>
        <p>{p}</p>
        <hr />
        <p v-show={flag1}>测试 flag v-show</p>
        <p v-show={flag2}>测试 flag ref v-show</p>
        <p v-show={flag2.value}>测试 flag ref 解包 v-show</p>
        <hr />
        <p>替代 flag ref v-if : {flag2.value ? <span>true</span> : <span>false</span>}</p>
        <hr />
        <div>替代 data 的 v-for</div>
        <ul>
          {data.map((v) => {
            return <li name={v.name}>{v.name}</li>
          })}
        </ul>
        <hr />
        <p>props: {props?.name}</p>
        <hr />
        <p>onClick 点击下面列表</p>
        <ul>
          {data.map((v) => {
            return (
              <li onClick={() => tsxClick(v)} name={v.name}>
                {v.name}
              </li>
            )
          })}
        </ul>
        <hr />
        <p>slot</p>
        <A v-slots={slots}></A>
        <hr />
        <p>v-model</p>
        <input type="text" v-model={v.value} />
        <p>v-model: {v.value}</p>
      </div>
    )
  },
})
